<template>
  <el-dialog
    v-if="detlistarr.taskStatusTypeEntity"
    title="工单详情"
    width="600px"
    :visible="detVisible"
    :before-close="detVisiblefn"
  >
    <div v-if="detlistarr.taskStatusTypeEntity.statusId === 1" class="label">
      <div class="task-status">
        <img
          class="icon"
          src=""
          alt
        >
        <span>代办</span>
        <img class="pic" src="https://likede2-admin.itheima.net/img/pic_1.834b274c.png" alt>
      </div>
      <div class="list">
        <ul>
          <li>
            <p>
              设备编号：
              <span>{{ detlistarr.innerCode }}</span>
            </p>
          </li>
          <li>
            <p>
              创建日期：
              <span>{{ detlistarr.createTime |formatDate }}</span>
            </p>
          </li>
          <li>
            <p>
              运维人员：
              <span>{{ detlistarr.userName }}</span>
            </p>
          </li>
          <li>
            <p>
              工单类型：
              <span v-if="detlistarr.taskType">{{ detlistarr.taskType.typeName }}</span>
            </p>
          </li>
          <li>
            <p>
              工单方式：
              <span
                v-if="detlistarr.taskStatusTypeEntity"
              >{{ detlistarr.taskStatusTypeEntity.statusName }}</span>
            </p>
          </li>
          <li>
            <p>
              备注：
              <span>{{ detlistarr.desc }}</span>
            </p>
          </li>
        </ul>
      </div>
      <div class="btn">
        <el-button type="primary" plain class="againbtn" @click="againbtn">取消工单</el-button>
      </div>
    </div>
    <div v-else-if="detlistarr.taskStatusTypeEntity.statusId === 2" class="label">
      <div class="task-status">
        <img
          class="icon"
          src=""
          alt
        >
        <span>取消</span>
        <img class="pic" src="https://likede2-admin.itheima.net/img/pic_3.e8208e34.png" alt>
      </div>
      <div class="list">
        <ul>
          <li>
            <p>
              设备编号：
              <span>{{ detlistarr.innerCode }}</span>
            </p>
          </li>
          <li>
            <p>
              创建日期：
              <span>{{ detlistarr.createTime |formatDate }}</span>
            </p>
          </li>
          <li>
            <p>
              取消日期：
              <span>{{ detlistarr.updateTime |formatDate }}</span>
            </p>
          </li>
          <li>
            <p>
              运维人员：
              <span>{{ detlistarr.userName }}</span>
            </p>
          </li>
          <li>
            <p>
              工单类型：
              <span v-if="detlistarr.taskType">{{ detlistarr.taskType.typeName }}</span>
            </p>
          </li>
          <li>
            <p>
              工单方式：
              <span
                v-if="detlistarr.taskStatusTypeEntity"
              >{{ detlistarr.taskStatusTypeEntity.statusName }}</span>
            </p>
          </li>
          <li>
            <p>
              取消原因：
              <span>{{ detlistarr.expect }}</span>
            </p>
          </li>
          <li>
            <p>
              定位：
              <span>{{ detlistarr.addr }}</span>
            </p>
          </li>
        </ul>
      </div>
      <div class="btn">
        <el-button type="primary" plain class="againbtn">重新创建</el-button>
      </div>
    </div>
    <div v-else-if="detlistarr.taskStatusTypeEntity.statusId === 3" class="label">
      <div class="task-status">
        <img
          class="icon"
          src=""
          alt
        >
        <span>取消</span>
        <img class="pic" src="https://likede2-admin.itheima.net/img/pic_3.e8208e34.png" alt>
      </div>
      <div class="list">
        <ul>
          <li>
            <p>
              设备编号：
              <span>{{ detlistarr.innerCode }}</span>
            </p>
          </li>
          <li>
            <p>
              创建日期：
              <span>{{ detlistarr.createTime |formatDate }}</span>
            </p>
          </li>
          <li>
            <p>
              取消日期：
              <span>{{ detlistarr.updateTime |formatDate }}</span>
            </p>
          </li>
          <li>
            <p>
              运维人员：
              <span>{{ detlistarr.userName }}</span>
            </p>
          </li>
          <li>
            <p>
              工单类型：
              <span v-if="detlistarr.taskType">{{ detlistarr.taskType.typeName }}</span>
            </p>
          </li>
          <li>
            <p>
              工单方式：
              <span
                v-if="detlistarr.taskStatusTypeEntity"
              >{{ detlistarr.taskStatusTypeEntity.statusName }}</span>
            </p>
          </li>
          <li>
            <p>
              取消原因：
              <span>{{ detlistarr.expect }}</span>
            </p>
          </li>
          <li>
            <p>
              定位：
              <span>{{ detlistarr.addr }}</span>
            </p>
          </li>
        </ul>
      </div>
      <div class="btn">
        <el-button type="primary" plain class="againbtn" @click="showAdd">重新创建</el-button>
      </div>
    </div>
    <div v-else class="label">
      <div class="task-status">
        <img
          class="icon"
          src=""
          alt
        >
        <span>完成</span>
        <img class="pic" src="https://likede2-admin.itheima.net/img/pic_4.3b5af41c.png" alt>
      </div>
      <div class="list">
        <ul>
          <li>
            <p>
              设备编号：
              <span>{{ detlistarr.innerCode }}</span>
            </p>
          </li>
          <li>
            <p>
              创建日期：
              <span>{{ detlistarr.createTime |formatDate }}</span>
            </p>
          </li>
          <li>
            <p>
              完成日期：
              <span>{{ detlistarr.updateTime |formatDate }}</span>
            </p>
          </li>
          <li>
            <p>
              运维人员：
              <span>{{ detlistarr.userName }}</span>
            </p>
          </li>
          <li>
            <p>
              工单类型：
              <span v-if="detlistarr.taskType">{{ detlistarr.taskType.typeName }}</span>
            </p>
          </li>
          <li>
            <p>
              工单方式：
              <span
                v-if="detlistarr.taskStatusTypeEntity"
              >{{ detlistarr.taskStatusTypeEntity.statusName }}</span>
            </p>
          </li>
          <li>
            <p>
              备注：
              <span>{{ detlistarr.desc }}</span>
            </p>
          </li>
          <li>
            <p>
              定位：
              <span>{{ detlistarr.addr }}</span>
            </p>
          </li>
        </ul>
      </div>
    </div>
    <ElDkdPCAdd :add-visible.sync="Visible" />
  </el-dialog>
</template>

<script>
import { cancelOrder, register } from '@/api/task'
// import add from './add.vue'

export default {
  name: 'ElDkdPCDet',
  components: {
    // add
  },
  props: {
    detVisible: {
      type: Boolean,
      default: false
    },
    detlistarr: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      Visible: false
    }
  },

  mounted() {},

  methods: {
    async cancelOrderApi() {
      const res = await cancelOrder({
        desc: '',
        taskId: this.detlistarr.taskId
      })
      console.log(res)
    },
    detVisiblefn() {
      this.$emit('update:detVisible', false)
    },
    againbtn() {
      this.$confirm('取消工单后，将不能恢复，是否确认取消？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.cancelOrderApi()
        this.$emit('update:detVisible', false)
        this.$message({
          type: 'success',
          message: '取消成功!'
        })
        this.$parent.search()
      })
    },
    async registerApi(id) {
      const res = await register(id)
      console.log(res)
    },
    async showAdd() {
      // this.Visible = true
      await this.$emit('update:detVisible', false)
    }
  }
}
</script>

<style lang="scss" scoped>
ul li {
  list-style: none;
}
.task-status {
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: hsla(0, 0%, 92.5%, 0.39);
  margin-bottom: 25px;
  .icon {
    width: 26px;
    height: 26px;
    margin-left: 25px;
  }
  span {
    flex: 1;
    margin-left: 10px;
  }
  .pic {
    width: 88px;
    height: 68px;
    margin-right: 25px;
  }
}
.list {
  padding: 0 25px;
  height: 100%;
  padding-bottom: 30px;
  ul {
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    li {
      width: 50%;
      height: 36px;
      line-height: 36px;
      span {
        padding-left: 10px;
      }
    }
  }
}
.btn {
  margin-top: 25px;
  display: flex;
  justify-content: center;
}
.againbtn {
  background-color: #f3e7e1;
  color: black;
  border: 0;
}
</style>
